<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>热压盘</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
      }
      body {
        overflow: hidden;
      }
      .container {
        width: 100%;
        height: 100%;
        position: relative;
      }
      iframe {
        width: 100%;
        height: 100%;
      }
      .u2556 {
        position: absolute;
        left: 382px;
        top: 140px;
        width: 250px;
        height: 130px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/HPPlate/u2556.svg) no-repeat;
      }
      .u2557 {
        position: absolute;
        left: 1150px;
        top: 276px;
        width: 250px;
        height: 144px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/HPPlate/u2556.svg) no-repeat;
      }
      .u2578 {
        position: absolute;
        left: 468px;
        top: 475px;
        width: 250px;
        height: 191px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/HPPlate/u2578.svg) no-repeat;
      }
      .u2527 {
        position: absolute;
        left: 940px;
        top: 83px;
        width: 355px;
        height: 158px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/HPPlate/u2527.svg) no-repeat;
      }
      .u2556 > .title,
      .u2557 > .title,
      .u2578 > .title {
        height: 30px;
        background: url(./images/HPPlate/title.svg) no-repeat;
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        line-height: 30px;
      }
      .u2527 > .title {
        height: 30px;
        background: url(./images/HPPlate/u2527-t.svg) no-repeat;
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        line-height: 30px;
      }
      .title::after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 9px;
        position: absolute;
        top: 10px;
        right: 12px;
        background: url(./images/HPPlate/u3.svg) no-repeat;
      }
      .list-col {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px 15px;
      }
      .list-col > .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .list-row {
        flex: 1;
        height: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 15px;
        gap: 10px;
      }
      .list-row > .list-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        width: 0;
      }
      .list-item > .name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .list-item > .value {
        font-size: 18px;
        color: rgba(102, 187, 249);
      }
      .list-col > .list-row {
        padding: 0;
      }
      .list-col > .list-row > .list-item {
        flex: 1;
      }

      .u2444 {
        position: absolute;
        right: 2px;
        bottom: 50px;
        width: 451px;
        height: 280px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/HPPlate/u2444.svg) no-repeat;
      }
      .u2444 > .title {
        height: 40px;
        background: url(./images/HPPlate/u2444-t.svg) center center no-repeat;
        position: relative;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
      }
      .u2444 > .title::after {
        content: "";
        width: 0;
        height: 0;
        background: none;
      }
      .u2444 .list-col {
        padding: 10px 70px;
      }
      .u2444 .list-item > .name {
        font-size: 20px;
      }
      .u2444 .list-item > .value {
        font-size: 28px;
      }
      video{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video
        allowfullscreen="true"
        x5-video-player-fullscreen="true"
        id="video"
      ></video>
      <div class="u2556">
        <div class="title">前热压盘</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">热压合前盘面温度</div>
            <div class="value frontTemp">-</div>
          </div>
          <div class="list-item">
            <div class="name">前油缸压力</div>
            <div class="value K58">-</div>
          </div>
        </div>
      </div>
      <div class="u2557">
        <div class="title">后热压盘</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">热压合后盘面温度</div>
            <div class="value backTemp">-</div>
          </div>
          <div class="list-item">
            <div class="name">后油缸压力</div>
            <div class="value K59">-</div>
          </div>
        </div>
      </div>
      <div class="u2578">
        <div class="title">移动小车</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">移动小车运行次数</div>
            <div class="value K60">-</div>
          </div>
          <div class="list-item">
            <div class="name">移动小车升降次数</div>
            <div class="value K61">-</div>
          </div>
          <div class="list-item">
            <div class="name">移动小车运行时间</div>
            <div class="value K62">-</div>
          </div>
        </div>
      </div>
      <div class="u2527">
        <div class="title">热压盘</div>
        <div class="list-col">
          <div class="list-row">
            <div class="list-item">
              <div class="name">翻转次数</div>
              <div class="value K53">-</div>
            </div>
            <div class="list-item">
              <div class="name">压合次数</div>
              <div class="value K54">-</div>
            </div>
            <div class="list-item">
              <div class="name">翻转电机</div>
              <div class="value K55">-</div>
            </div>
          </div>
          <div class="list-row">
            <div class="list-item">
              <div class="name">踢纸电机</div>
              <div class="value K56">-</div>
            </div>
            <div class="list-item">
              <div class="name">踢纸总次数</div>
              <div class="value K57">-</div>
            </div>
            <div class="list-item"></div>
          </div>
        </div>
      </div>
      <div class="u2444">
        <div class="title">2020Z028-3-W03#PM1</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">设备状态</div>
            <div class="value Condition">-</div>
          </div>
          <div class="list-item">
            <div class="name">总包装数量</div>
            <div class="value Yield">-</div>
          </div>
          <div class="list-item">
            <div class="name">当前节拍</div>
            <div class="value K0">-</div>
          </div>
          <div class="list-item">
            <div class="name">最高节拍</div>
            <div class="value K1">-</div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/ezuikit.js"></script>
    <script src="./js/dv.js"></script>
  </body>
</html>
